<template>
  <div class="goodsTalentSales">
    <choice1 class="choice01" @formatwdate="formatwdate" @formatwdate1="formatwdate1" show="day"></choice1>
    <div id="TanlentSales">
      <van-loading size="24px" vertical type="spinner" v-if="loading_01">拼命加载中...</van-loading>
      <van-list
        v-if="dataList.length"
        v-model="loading"
        :finished="finished"
        :finished-text="permissions || (!loading_01 && isQzss) ? '' : '我是有底线的～'"
        @load="onLoad"
        :immediate-check="false"
      >
        <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
        <div
          class="box"
          v-for="(item, index) in dataList"
          :key="index + 't'"
          @click="taldatails(item.author_id)"
        >
          <div class="boxtop">
            <!-- 视频ban -->
            <div class="boxleft">
              <div class="rank" :class="sstt[index]" v-if="index <= 8">
                <p :class="num[index]">{{ index + 1 }}</p>
              </div>
              <div class="rank1" v-else>{{ index + 1 }}</div>
              <a href="#">
                <img class="img_01" :src="item.logo" alt />
              </a>
            </div>
            <!-- 文字介绍 -->
            <div class="boxright">
              <div class="boxrightTop">
                <p class="tit_01">{{ item.nickname }}</p>
                <p class="category_01">行业: {{ item.category }}</p>
              </div>
            </div>
          </div>
          <!-- 数量 -->
          <div class="num">
            <div class="one one_1">
              <p v-if="item.fans_count > 9999">{{ format_num(item.fans_count) }}</p>
              <p v-else>{{ item.fans_count }}</p>
              <span class="color">粉丝数</span>
            </div>
            <div class="two one_1">
              <p v-if="item.video_count > 9999">{{ format_num(item.video_count) }}</p>
              <p v-else>{{ item.dayvolume }}</p>
              <span class="color">预估销量</span>
            </div>
            <div class="two one_1">
              <p v-if="item.video_count > 9999">{{ format_num(item.video_count) }}</p>
              <p v-else>{{ item.live_sales }}</p>
              <span class="color">预估销售额</span>
            </div>
          </div>
        </div>
        <!-- <p
          class="nothingWl"
          v-if="!loading_01 && dataList.length != 0 && !isQzss"
        >
          我是有底线的~
        </p>-->
        <p v-if="!loading_01 && isQzss && !permissions" class="nothingWl">
          榜单中没有您想要的结果?
          <span @click="toSearch">全站搜索</span>
        </p>
        <noPower v-if="permissions" :icon="false" :isRank="true" />
        <!-- <p class="bot1" v-if="!loading && dataList.length != 0">
                <img src="../../assets/three/permissions.png" alt="" />
        </p>-->
        <!-- </van-pull-refresh> -->
      </van-list>
      <div class="bottom_Collection" v-if="!dataList.length && !loading_01">
        <img src="@/assets/three/noData.png" alt />
        <!-- <p class="nothingWl" v-if="!isQzss">我是有底线的~</p> -->
        <p>
          榜单中没有您想要的结果?
          <span @click="toSearch">全站搜索</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import radio_group from '@/component/screen1';
import search from '@/component/search';
import choice from '@/component/choice_2';
import choice1 from '@/component/choice_1';
import choice3 from '@/component/choice3';
import SourceIcon from '@/component/SourceIcon'; //图片
// import VConsole from 'vconsole';

// let vConsole = new VConsole();
export default {
  name: '',
  components: {
    choice,
    radio_group,
    SourceIcon,
    choice1,
    choice3,
    search
  },

  data() {
    return {
      a: true,
      valueSerach: '',
      loading_01: false,
      permissions: false, //权限
      tit1: '筛选',
      tit2: '全部',
      title1: '商品类目',
      source: '全部',
      source_01: '全部',
      goodslist: [], //全部商品
      goodslist1: [],
      CategoryId: 0, // "商品id"
      CategoryId_01: 0, // "商品id"
      RankType: 1, //判断日月周榜单
      Time: '', //时间
      keyword: '',
      page: 1,
      Age: '不限',
      Gender: '不限',
      //  ss
      sourceList: ['全部', '京东', '淘宝', '小店', '天猫', '苏宁', '考拉'],
      title: '日榜',
      value: '',
      ProFrom: -1, //商品来源 京东=0,淘宝=1,小店=2,天猫=3,苏宁=4,考拉=5
      sstt: ['ss1', 'ss2', 'ss3', 'ss4'],
      num: ['num1', 'num2', 'num3'],
      page: 1,
      count: '',
      table_data01: [],
      table_data02: [],
      dataList: [],
      //触底
      loading: false,
      finished: false,
      refreshing: false,
      pageSize: 30,
      isQzss: false
    };
  },
  computed: {},
  watch: {},

  created() {
    if (window.pageYOffset != 0) {
      window.pageYOffset = 10;
    }
    // this.scrollToTop()
    // this.jia=false
    this.finished = false;
    this.valueSerach = '';
    this.keyword = '';
    this.permissions = false;
    this.page = 1;
    this.CategoryId = 0;
    this.RankType = 1;

    this.getday();
    this.dataList = [];
    this.getData();
  },
  mounted() {
    this.getday();
    this.getProCategories();
  },

  methods: {
    searchKey(key) {
      this.valueSerach = key;
      this.page = 1;
      (this.permissions = false), (this.finished = false);
      this.dataList = [];
      this.getData();
    },
    toSearch() {
      this.$router.push({
        path: '/searchHistory',
        query: { value: 1, name: this.valueSerach }
      });
    },
    returnBack(a) {
      this.page = 1;
      this.keyword = a;

      this.dataList = [];
      this.getData();
    },
    returnBack1(a) {
      this.keyword = a;
    },
    douyin(i) {
      location.href = i;
    },
    //跳转达人详情
    taldatails(id) {
      this.$router.push({ path: '/talentDetailsMain', query: { id: id } });
    },
    //跳转商品详情
    todatails(id) {
      this.$router.push({ path: '/goodsDetailsMain', query: { id: id } });
    },
    //子组件传来的周月日榜
    formatwdate(i, time) {
      this.page = 1;
      this.table_data01 = [];
      this.table_data02 = [];
      if (i == '日榜') {
        this.getday();
        this.RankType = 1;
      } else if (i == '周榜') {
        this.deltime(time);
        this.RankType = 2;
      } else if (i == '月榜') {
        this.month();
        this.RankType = 3;
      }
    },
    formatwdate1(i, time) {
      this.page = 1;
      this.table_data01 = [];
      this.table_data02 = [];
      this.dataList = [];
      if (this.RankType == 3) {
        this.Time = time;
        this.PostRankList();
      } else if (this.RankType == 2) {
        this.deltime(i);
      } else {
        this.Time = this.year() + '-' + i;
      }
      this.getData();
    },
    // 商品类目接口
    getProCategories() {
      return this.$axios({
        method: 'get',
        url: '/api/product/GetProCategoriesNew'
      })
        .then(res => {
          //   全部中的商品名称
          this.goodslist1 = res.data.data;
          this.goodslist = this.goodslist1.map(item => {
            return item.categoryName;
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取数据抖音销量榜
    PostRankList() {
      this.loading = true;
      this.loading_01 = true;
      this.permissions = false;
      this.finished = false;
      this.keyword ? (this.isQzss = true) : (this.isQzss = false);
      this.$axios
        .post('/api/product/PostDYVolumeRanks', {
          CategoryId: this.CategoryId,
          RankType: this.RankType,
          ProFrom: this.ProFrom,
          Gender: this.Gender,
          Age: this.Age,
          Time: this.Time,
          Keyword: this.valueSerach ? this.valueSerach : '',
          Index: this.page,
          Size: this.pageSize,
          type: 2
        })
        .then(res => {
          if (res.data.code == 0) {
            this.table_data01 = this.table_data01.concat(res.data.data.ranks);
            this.loading = false;
            this.loading_01 = false;
            this.refreshing = false;
            this.finished = false;
            if (res.data.data.ranks.length < this.pageSize && res.data.data.ranks.length) {
              this.finished = true;
            }
          } 
          if (res.data.code == 1003 || res.data.code1 == 1013) { //code1:1013个数权限不够 - code1专门给前端用
            this.permissions = true;
            this.loading = false;
            this.loading_01 = false;
            this.finished = true;
          }
        })
        .catch(err => {
          this.loading = false;
          this.loading_01 = false;
          this.finished = true;
          console.log(err);
        });
    },
    //或去年
    year() {
      var today = new Date();
      var tYear = today.getFullYear();
      return tYear;
    },
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + '-' + tMonth + '-' + tDate;
      // console.log( + tDate);
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = '0' + month;
      }
      return m;
    },
    //当前日默认时间
    getday() {
      var today = new Date();
      let h = today.getHours();
      let m = today.getMinutes();
      var i;
      if (h > 15 || (h == 15 && m >= 30)) {
        this.Time = this.getDay(-1);
      } else {
        this.Time = this.getDay(-2);
      }
    },
    //当前月默认时间
    //去掉月日
    deltime(time) {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var a = time.replace(/日/g, '-');
      var str = a.replace(/月/g, '-');
      var str1 = str.replace(/--/g, '-' + y + '-');
      var str1 = str1.substring(0, str1.length - 1);
      this.Time = y + '-' + str1;
    },

    month() {
      var nowdate = new Date();
      var y = nowdate.getFullYear();
      var m = nowdate.getMonth();
      var d = nowdate.getDate();
      var lastDay = new Date(y, m, 0);
      if (m < 10) {
        m = '0' + m;
      }
      if (d < 10) {
        d = '0' + d;
      }
      var newvalue = y + '-' + m + '-' + '01' + '-' + y + '-' + m + '-' + lastDay.getDate();
      this.Time = newvalue;
    },
    //触底
    onLoad() {
      if (this.page * this.pageSize > this.table_data01.length) {
        this.loading = false;
        this.finished = true;
      } else if (this.table_data01.length) {
        this.loading = true;
        this.page = this.page + 1;
        // this.PostRankList();
        this.getData();
      }
    },
    onRefresh() {
      // 清空列表数据
      //   this.finished = false;
      this.loading = false;
      this.finished = false;
      this.page = 1;
      this.table_data01 = [];
      this.table_data02 = [];
      this.dataList = [];
      // 重新加载数据

      this.getData();
    },
    //
    getData() {
      let that = this;
      this.loading_01 = true;
      this.isQzss = Boolean(this.valueSerach);
      that.$axios
        .get('/api/product/GetProShareRank', {
          params: {
            Keyword: this.valueSerach ? this.valueSerach : '',
            time: this.Time
          }
        })
        .then(res => {
          if (res.data.code == 0) {
            that.dataList = res.data.data;
            this.loading_01 = false;
            this.refreshing = false;
            if (res.data.data.length != 0) {
              this.finished = true;
            }
            this.loading = false;
            if (this.dataList.length == 0) {
              this.loading = false;
              this.loading_01 = false;
              this.finished = false;
            }
          }
        })
        .catch(err => {
          this.loading = false;
          this.loading_01 = false;
          console.log(err);
        });
    }
  }
};
</script>
<style lang="less" scoped>
//@import url();
.goodsTalentSales {
  .nothingWl {
    font-size: 0.346667rem;
    color: #888;
    padding-bottom: 1.6rem;
    span {
      color: #fd7f2c;
    }
  }
  a {
    text-decoration: none;
  }
  .bottom_Collection {
    img {
      margin: 0 auto;
      width: 4rem;
      height: 3.2rem;
      margin-top: 4rem;
      display: block;
    }
    p {
      text-align: center;
      font-size: 0.346667rem;
      line-height: 0.4rem;
      color: #888888;
    }
    span {
      color: #fd7f2c;
    }
  }
  .one_1 {
    span {
      font-size: 0.293333rem;
      color: #888888;
    }
  }
  .choice {
    width: 5.333333rem;
  }
  #TanlentSales {
    .rank1 {
      background: #f1f1f1;
      height: 0.466667rem;
      line-height: 0.58rem;
      border-radius: 0.226667rem;
      position: absolute;
      top: 0.133333rem;
      left: 0.093333rem;
      font-size: 0.373333rem;
      padding-left: 0.12rem;
      padding-right: 0.12rem;
      text-align: center;
      text-align: center;
      font-family: DINPro-Medium;
      color: #666666;
    }
    margin: 0 auto;
    width: 9.2rem;
    margin-bottom: 1.62rem;
    .box {
      width: 9.2rem;
      background-color: #ffffff;
      border-radius: 0.133333rem;
      margin-bottom: 0.18666rem;
      padding: 0.266rem 0 0.266rem 0;
      .boxtop {
        display: flex;
      }
      .img_01 {
        margin-left: 0.266667rem;
        width: 1.173333rem;
        height: 1.17333rem;
        background-color: #e1007e;
        border: solid 1px #e5e5e5;
        border-radius: 50%;
        margin-top: 0.226667rem;
      }
      .boxright {
        font-size: 0.4rem;
        color: #222222;
        margin-left: 0.253333rem;
      }
      .tit_01 {
        //达人标题
        font-size: 0.4rem;
        max-width: 5.666667rem;
        letter-spacing: 1px;
        color: #222222;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-top: 0.26666rem;
      }
      .category_01 {
        font-size: 0.32rem;
        letter-spacing: 1px;
        color: #888;
        margin-top: 0.133333rem;
      }
      .boxleft {
        position: relative;
        .rank {
          position: absolute;
          top: 0;
          left: 0.13rem;
          z-index: 1;
          width: 0.62rem;
          height: 0.52rem;
          background: url(../../assets/two/fire.png) no-repeat center;
          background-size: 100% 100% !important;
          box-sizing: 100%;
          p {
            font-family: DINPro-Medium;
            font-size: 0.373333rem;
            color: #666666;
            text-align: center;
            line-height: 0.56rem;
          }
        }
        > .aa {
          width: 2.133rem;
          line-height: 2.133rem;
          display: block;
          margin: 0.266rem 0 0 0.266rem;
          > img {
            width: 100%;
            display: block;
          }
        }
      }
      //数量
      .num {
        display: flex;
        justify-content: space-around;
        padding-top: 0.4rem;
        .one,
        .two {
          text-align: center;
          p {
            font-family: Dinpro-medium;
            font-size: 0.373333rem;
            color: #222;
          }
          span {
            display: block;
            font-size: 0.293333rem;
            color: #888;
            font-weight: normal !important;
          }
        }
      }
    }
  }
  .color {
    color: #888;
  }
  .choice01 {
    width: 7.5rem !important;
  }
}
</style>
